<script setup>
import { onMounted, onUnmounted } from "vue";
import router from "@/router/index";
import { _$, $ } from "./detail";

onMounted(() => {
  _$.requestParam.id = router.currentRoute.value.query.id;
  $.loadDetail();
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="vertical" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()">
      <template #content>
        <span class="text-large font-600 mr-3"> 食谱信息详情 </span>
      </template>
    </el-page-header>
    <el-card class="w-fill" shadow="never">
      <el-descriptions title="基本信息" :column="3">
        <el-descriptions-item label="食谱名称">
          {{ _$.responseParam.name }}
        </el-descriptions-item>
        <el-descriptions-item label="食谱内容">
          {{ _$.responseParam.content }}
        </el-descriptions-item>
        <el-descriptions-item label="食谱描述">
          {{ _$.responseParam.text }}
        </el-descriptions-item>
        <el-descriptions-item label="食谱类型" :span="3">
          {{ _$.responseParam.typeId }}
        </el-descriptions-item>
        <el-descriptions-item label="食谱图片信息" :span="3">
          <el-upload
            :class="{ disabled: true }"
            disabled
            v-model:file-list="_$.fileList"
            list-type="picture-card"
            :on-preview="$.onPreview"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="_$.state.previewDialogVisible">
            <img w-full :src="_$.state.dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-descriptions-item>
        <el-descriptions-item label="食谱适宜人群">
          <el-tag
            type="success"
            v-for="item in _$.responseParam.recipeCureDiseaseList"
          >
            {{ item.name }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="食谱会导致的过敏">
          <el-tag
            type="warning"
            v-for="item in _$.responseParam.recipeAllergyList"
          >
            {{ item.name }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="食谱不适宜人群">
          <el-tag
            type="warning"
            v-for="item in _$.responseParam.recipeDiseaseList"
          >
            {{ item.name }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </el-space>
</template>

<style scoped>
:v-deep(.disabled .el-upload--picture-card) {
  display: none !important;
}
</style>
